<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>生成图标</title>
</head>
<body>
    <h1>图标生成器</h1>
    <p>点击下面的按钮来生成不同尺寸的PNG图标：</p>
    
    <div id="iconContainer"></div>
    
    <script>
        const svgContent = `<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
    </linearGradient>
  </defs>
  
  <!-- 背景圆形 -->
  <circle cx="64" cy="64" r="60" fill="url(#grad1)" stroke="#fff" stroke-width="4"/>
  
  <!-- 相机主体 -->
  <rect x="32" y="48" width="64" height="32" rx="8" fill="#fff" opacity="0.9"/>
  
  <!-- 相机镜头 -->
  <circle cx="64" cy="64" r="12" fill="#333"/>
  <circle cx="64" cy="64" r="8" fill="#fff"/>
  
  <!-- 闪光灯 -->
  <rect x="88" y="52" width="8" height="6" rx="2" fill="#fff" opacity="0.8"/>
  
  <!-- 取景器 -->
  <rect x="40" y="56" width="6" height="4" rx="1" fill="#333"/>
</svg>`;

        const sizes = [16, 48, 128];
        const container = document.getElementById('iconContainer');

        sizes.forEach(size => {
            const button = document.createElement('button');
            button.textContent = `下载 ${size}x${size} 图标`;
            button.style.margin = '10px';
            button.style.padding = '10px 20px';
            button.style.fontSize = '14px';
            button.style.backgroundColor = '#667eea';
            button.style.color = 'white';
            button.style.border = 'none';
            button.style.borderRadius = '5px';
            button.style.cursor = 'pointer';
            
            button.onclick = () => {
                const canvas = document.createElement('canvas');
                canvas.width = size;
                canvas.height = size;
                const ctx = canvas.getContext('2d');
                
                const img = new Image();
                img.onload = () => {
                    ctx.drawImage(img, 0, 0, size, size);
                    
                    const link = document.createElement('a');
                    link.download = `icon${size}.png`;
                    link.href = canvas.toDataURL();
                    link.click();
                };
                
                const svgBlob = new Blob([svgContent], {type: 'image/svg+xml'});
                const url = URL.createObjectURL(svgBlob);
                img.src = url;
            };
            
            container.appendChild(button);
        });
    </script>
</body>
</html>